<template>
    <div>
        <el-row>
            <el-col :xs="24" :md='8'>
                <div class="grid-content bg-purple">
                    <el-card>
                        <p>{{one}}</p>
                        <p>用户总数</p>
                    </el-card>
                </div>
                </el-col>
            <el-col :xs="24" :md='8'>
                <div class="grid-content bg-purple-light">
                    <el-card>
                        <p>{{two}}</p>
                        <p>商品总数</p>
                    </el-card>
                </div>
                </el-col>
            <el-col :xs="24" :md='8'>
                <div class="grid-content bg-purple">
                    <el-card>
                        <p>{{three}}</p>
                        <p>订单总数</p>
                    </el-card>
                </div>
                </el-col>
        </el-row>
    </div>
</template>
<script>
import {sumList} from '@/api/api'
export default {
    name:'',
    components: {},
    props: [],
    data() {
        return {
            one:0,
            two:0,
            three:0,
        };
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
        this.getInfo()
    },
    methods: {
        async getInfo(){
            const {data:res} = await sumList()
            // console.log(res)
            this.one = res.data.orderCount
            this.two = res.data.productCount
            this.three = res.data.userCount
        }
    },
};
</script>
<style scoped>
.el-card{
    margin: 20px;
    text-align: center;
}
.el-card:hover{
    transform: scale(1.1);
    background: #0088dd;
    color:#fff;
}
</style>